<template>
  <div class="container">
    <header class="header">会员注册</header>
    <div class="content">
      <van-field
        v-model="username"
        placeholder="请输入手机号"
        clearable
        :error-message="usernamemsg"
      />
      <van-field
        v-model="password"
        type="password"
        clearable
        placeholder="请输入密码"
        :error-message="passwordmemsg"
      />
      <van-field
        v-model="code"
        center
        clearable
        placeholder="请输入短信验证码"
        :error-message="authcode"
      >
        <van-button slot="button" size="small" type="primary"  @click ="getCode" v-text="computedTime>0?`已发送(${computedTime}s)`:'获取验证码'">发送验证码</van-button>
      </van-field>
      <div class="foot" @click="sign">立即注册</div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
    .header{
      display: flex;
      align-items: center;
      justify-content: center;
      height: 3.8rem;
      background: red;
    }
    .foot{
      display: flex;
      align-items: center;
      justify-content: center;
      background:rosybrown;
      width: 25rem;
      height: 2.8rem;
      border-radius: 1rem;
      margin-left: 6rem;
      margin-top: 2.8rem;
    }
</style>
<script>
import Vue from 'vue'
import { Field, Button,Dialog, Toast } from 'vant'

Vue.use(Field)
Vue.use(Dialog)
Vue.use(Button)
export default {
  data () {
    return {
       computedTime:0, //标识
      username: '',
      password: '',
      code: ''
    }
  },
  computed: {
    usernamemsg () {
      if (this.username === '') {
        return ''
      } else if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(this.username)) {
        return '手机号码格式错误'
      } else {
        return ''
      }
    },
      passwordmemsg () {
      if (this.password === '') {
        return ''
      } else if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(this.password)) {
        return '密码格式错误'
      } else {
        return ''
      }
    },
     authcode () {
      if (this.code === '') {
        return ''
      } else if (!/^[1][3,4,5,7,8][0-9]{4}$/.test(this.code)) {
        return '验证码格式错误'
      } else {
        return ''
      }
    }
  },
    methods:{
      getCode(){
        if(this.computedTime==0){
          this.computedTime=30
          var IntervalId=setInterval(()=>{
          this.computedTime--
          if(this.computedTime<=0){
            clearInterval(IntervalId) 
          }
        },1000)
        }
      },
      sign(){
        let data = {
          username : this.username,
          password : this.password
        }
        this.$axios.post("http://rap2.taobao.org:38080/app/mock/266947/users",data).then((res)=>{
          console.log(res)
          if(res.data.code == 1000){
            Toast('该用户已注册')
          }else{
 this.$router.push({path:'/login'})
          }
            
         }
        )
      }
}
}
</script>
